<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
<!--                    <input name="username" type="text" id="username" onblur="checkUsername()">-->
                    <input name="username" type="text" id="username" onblur="checkUsername()">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" onblur="checkPassword()">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>
    //验证用户名

    function checkUsername(){
        //1)获取用户名输入框的标签对象
        let objUsername = document.getElementById("username");
        //2)使用标签对象获取输入框输入的值锁哥
        let usernameVal = objUsername.value;
        //3)创建正则对象  单词组成 \w
        let reg = /^\w{6,12}$/;
        //4)判断输入的值是否满足正则
        if(reg.test(usernameVal)){
            let objUsernameSpan = document.getElementById("username_err");
            objUsernameSpan.style.display ="none"; 
            return true;

            /* 5)满足正则
                隐藏<span id="username_err"classa="err_msg"style=:"display:none">用户名不太受欢迎</span>
                说明用户名合法：针对当前用户名输入框是可以提交表单的return true*/
        }else{
            /* 6)不满足正则
                就是将用户名下面的span标签，<span id="username_err"class=:"err_msg"style="display:none">用户名不太受欢迎</span>
                显示到页面中
                disp1ay的值设置为block就可以显示
                说明用户名非法：针对当前用户名输入框是不可以提交表单的return false */
                let objUsernameSpan = document.getElementById("username_err");
                //shi用对象操作css样式
                objUsernameSpan.style.display ="block"; 
                //阻止表单提交
                return false;

        }



    }
    //2. 验证 密码是否符合规则:长度 6~12任意字符
    function checkPassword(){
        //获取对象输入框的值
        let objPasswordVal = document.getElementById("password").value
        //创建正则对象
        let reg = /^.{6,12}$/;
        //
        if(reg.test(objPasswordVal)){//符合正则
            let objPasswordSpan = document.getElementById("password_err");
            objPasswordSpan.style.display = "none";
            return false;
        }else{//不符合正则
            let objPasswordSpan = document.getElementById("password_err");
            objPasswordSpan.style.display = "block";
            return true;
        }

    }
    //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
    function checkTel(){
        //创建标签对象--获取输入框的值
        let objTel =  document.getElementById("tel").value;
        //正则表达对象
        //   \d 就是[0-9]  第二位必须是 356789中的任意一个 第三位任意数字中的一个
        let reg  = /^1[356789]\d{9}$/;
        //判断是否满足正则表达式
        if(reg.test(objTel)){//满足正则表达式
            //获取标签对象
            let objTelSpan = document.getElementById("tel_err");
            //用对象操作css页面
            objTelSpan.style.display = "none";
            //允许表单提交
            return true;

        }else{//不满足正则表达式
            //获取标签对象
            let objTelSpan = document.getElementById("tel_err");
            //用对象操作css页面
            objTelSpan.style.display = "block";
            //阻止表单提交
            return false;


        }


    }
    //4. 表单是否可以提交
    document.getElementById("reg_btn").onsubmit=function(){
        //return false;阻止提交表单  
        //return true; 都合法
        return checkUsername() && checkPassword() && checkTel();
    }
</script>
</body>
</html>